<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="font-size: 20px; color: white; width: 100%; text-align: left">
      扫描资源
    </div>
    <div
      style="
        width: 100%;
        flex: 1;
        margin-top: 10px;
        border-radius: 10px;
        background: #1c1c1c;
        border: solid 2px #404040;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          width: 100%;
          height: 50px;
          background: #383f3d;
          border-radius: 10px 10px 0 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div
          style="
            display: flex;
            align-items: center;
            color: #878888;
            cursor: pointer;
          "
        >
          <div>《</div>
          <div style="margin-left: 10px">返回</div>
        </div>
        <div style="color: #fcfcfc">添加资源</div>
        <div
          style="
            display: flex;
            align-items: center;
            color: #878888;
            cursor: pointer;
          "
        >
          <img
            src="../assets/refresh.png"
            style="width: 15px; height: 15px"
            alt=""
          />
          <div style="margin-left: 10px">刷新</div>
        </div>
      </div>
      <div style="width: 100%; flex: 1; display: flex">
        <div
          style="
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
          "
        >
          <div
            style="
              display: flex;
              align-items: center;
              margin-top: 20px;
              width: 100%;
            "
          >
            <div
              style="
                width: 5px;
                height: 30px;
                background: #27c48f;
                margin-right: 10px;
                border-radius: 5px;
                margin-left: 20px;
              "
            ></div>
            <div style="color: #e3e3e3">选择资源</div>
          </div>
          <div
            style="
              width: 80%;
              flex: 1;
              background: #000000;
              margin: 50px 0;
              border-radius: 20px;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
          >
            <div
              style="
                width: 80%;
                height: 40px;
                background: #252424;
                margin-top: 20px;
                border-radius: 20px;
                display: flex;
                align-items: center;
              "
            >
              <img
                src="../assets/search.png"
                style="width: 15px; height: 15px; margin-left: 20px"
                alt=""
              />
              <input
                v-model="searchForVideoList"
                type="text"
                style="
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: white;
                  margin-left: 10px;
                "
              />
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                color: #e0e0e0;
                width: 70%;
                margin-top: 10px;
              "
            >
              <input
                type="checkbox"
                v-model="selectAll"
                @input="changeSelectAll"
              />
              <div style="flex: 1; text-align: left; margin-left: 10px">
                全选
              </div>
            </div>
            <div
              v-for="(item, index) in videoList"
              :key="index"
              style="
                display: flex;
                align-items: center;
                color: #e0e0e0;
                width: 70%;
                margin-top: 10px;
              "
            >
              <input
                type="checkbox"
                v-model="item.selected"
                @input="changeSelect(index)"
              />
              <div style="flex: 1; text-align: left; margin-left: 10px">
                {{ item.file }}
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
          "
        >
          <div
            style="
              display: flex;
              align-items: center;
              margin-top: 20px;
              width: 100%;
            "
          >
            <div
              style="
                width: 5px;
                height: 30px;
                background: #27c48f;
                margin-right: 10px;
                border-radius: 5px;
                margin-left: 20px;
              "
            ></div>
            <div style="color: #e3e3e3">已选择</div>
          </div>
          <div
            style="
              width: 80%;
              flex: 1;
              background: #000000;
              margin: 50px 0;
              border-radius: 20px;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
          >
            <div
              style="
                width: 80%;
                height: 40px;
                background: #252424;
                margin-top: 20px;
                border-radius: 20px;
                display: flex;
                align-items: center;
              "
            >
              <img
                src="../assets/search.png"
                style="width: 15px; height: 15px; margin-left: 20px"
                alt=""
              />
              <input
                @input="changeInput2"
                v-model="searchForSelectedVideos"
                type="text"
                style="
                  background: transparent;
                  border: 0;
                  outline: 0;
                  color: white;
                  margin-left: 10px;
                "
              />
            </div>

            <div
              v-for="(item, index) in selectedVideoList"
              :key="index"
              style="
                display: flex;
                align-items: center;
                color: #e0e0e0;
                width: 70%;
                margin-top: 10px;
              "
            >
              <div style="flex: 1; text-align: left; margin-left: 10px">
                {{ item.file }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="unChanging"
        style="
          width: 100%;
          height: 300px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <div style="color: #d9d9d9">
          注意：预计转码需要10分钟，资源越多时间越长
        </div>
        <div style="display: flex; align-items: center; margin-top: 30px">
          <button
            @click="startTranscoding"
            style="
              background: #33a681;
              color: #e0e0e0;
              width: 100px;
              height: 30px;
            "
          >
            确定
          </button>
          <button
            style="
              background: #3a3a39;
              color: #e0e0e0;
              width: 100px;
              height: 30px;
              margin-left: 100px;
            "
          >
            取消
          </button>
        </div>
      </div>
      <div
        v-if="!unChanging"
        style="
          width: 100%;
          height: 300px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <div style="width: 80%">
          <el-progress
            :text-inside="false"
            :stroke-width="24"
            :percentage="changePercentage"
            status="success"
          ></el-progress>
        </div>
        <div style="width: 80%; display: flex; align-items: center;color: #d9d9d9;margin-top:20px;justify-content:space-between;">
          <div>正在转码：{{ changingFile }}</div>
          <div>当前进度：{{ changePercentage }}%</div>
          <div>{{ changeRest }}</div>
        </div>
        <div style="display: flex; align-items: center; margin-top: 30px">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      selectAll: false,
      videoList: [],
      selectedVideoList: [],
      searchForVideoList: null,
      searchForSelectedVideos: null,
      tokenId: null,
      unChanging: true,
      changePercentage: 0,
      changingFile: null,
      changeRest: null,
    };
  },
  methods: {
    checkAllSelect() {
      for (let index = 0; index < this.videoList.length; index++) {
        const element = this.videoList[index];
        if (element.selected != true) {
          this.selectAll = false;
          return;
        }
      }
      this.selectAll = true;
    },
    changeSelect(index) {
      const element = this.videoList[index];
      console.log(index);
      element.selected = !element.selected;

      if (element.selected) {
        this.selectedVideoList.push(element);
      } else {
        for (let index = 0; index < this.selectedVideoList.length; index++) {
          const selectedElement = this.selectedVideoList[index];
          if (selectedElement == element) {
            this.selectedVideoList.splice(index, 1);
            break;
          }
        }
      }
      this.checkAllSelect();
    },
    changeSelectAll() {
      this.selectAll = !this.selectAll;
      if (this.selectAll) {
        for (let index = 0; index < this.videoList.length; index++) {
          const element = this.videoList[index];
          element.selected = true;
          this.selectedVideoList.push(element);
        }
      } else {
        this.selectedVideoList = [];
        for (let index = 0; index < this.videoList.length; index++) {
          const element = this.videoList[index];
          element.selected = false;
        }
      }
    },
    async getResourceList() {
      let res = await request({
        url:
          "/material/api/getMaterialList/" + localStorage.getItem("user_name"),
        method: "GET",
      });
      if (res.data.status == 200) {
        this.videoList = res.data.data.data;
      }
    },
    async startTranscoding() {
      this.unChanging = false;
      let res = await request({
        url: "/material/api/addResources",
        method: "POST",
        data: {
          command: 16,
          wsToken: this.tokenId,
          user_name: localStorage.getItem("user_name"),
          data: this.selectedVideoList,
        },
      });
      if (res.data.status == 200) {
        console.log(res.data.data);
      }
    },
    initWs(wsId) {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        let wsUrl = window.location.origin.replace("http://", "");
        // 实例化socket 111是固定的用户id,正式环境直接获取当前登录用户id
        this.socket = new WebSocket(
          "ws:" + "192.168.0.16:8093" + "//wsServer/" + wsId
        );
        // this.socket = new WebSocket("ws:" + wsUrl + "//wsServer/" + wsId);
        this.global.setWs(this.socket);
        let that = this;
        // 监听socket连接
        this.socket.onopen = () => {
          console.log("socket连接成功");
          that.socket.send("connect#" + that.pageName + "#" + that.tokenId);
          this.getPageInfoByPageName(true);
        };
        // 监听socket错误信息
        this.socket.onerror = () => {
          console.error("连接错误");
          // that.initWs(wsId);
        };
        //监听socket消息
        this.socket.onmessage = (msg) => {
          let jsonObject = JSON.parse(msg.data);
          console.log(jsonObject);
          if (jsonObject.data.type == 0) {
            this.changePercentage = Number(jsonObject.data.progress);
            this.changingFile = jsonObject.data.file;
            this.changeRest = jsonObject.data.rest;
          }else if (jsonObject.data.type == 1) {
            this.unChanging = true;
          }
        };
        // 监听socket关闭信息
        this.socket.onclose = (e) => {
          console.log("socket已经关闭");
        };
      }
    },
    async connectWs() {
      let res = await request({
        url: "/user/api/getRandomId",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.tokenId = res.data.data;
        this.initWs(this.tokenId);
      }
    },
  },
  mounted() {
    this.connectWs();
    this.getResourceList();
  },
};
</script>

<style scoped>
</style>